<template>
	<view class="user-match">
		<view class="user-match-tabs">
			<u-tabs
				:list="[{name: '在线设计'},{name: '在线搭配'}]" 
				:is-scroll="false" 
				:current="tabsIndex"
				active-color="#141414"
				inactive-color="#666"
				@change="sortFun">
			</u-tabs>
		</view>
		<block v-if="show">
			<view class="user-match-list" v-if="matchList.length">
				<view class="user-match-item" v-for="(data,index) in matchList" :key="index" @click="goMatchInfo(data.match_id)">
					<view class="user-match-item-image">
						<u-image :src="data.img" :fade="true" height="260rpx" lazy-load></u-image>
					</view>
					<view class="user-match-item-info">
						<view class="user-match-item-name">
							<view class="user-match-item-name-text">{{data.name}}</view>
							<view class="user-match-item-like">点赞数：<text>{{data.like}}</text></view>
						</view>
						<view class="user-match-item-action">
							<view class="click">{{data.click}}人看过</view>
							<view class="action-type">
								<text @click.stop="del(data.match_id,index)">
									删除
								</text>
								<text @click.stop="edit(data.match_id)" v-if="tabsIndex!=0">
									编辑
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="noMore && matchList.length"></pt-nomore>
			<pt-nothing 
				:fixed="true" 
				top="80"
				text="您还没添加过方案" 
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1" 
				v-if="noMore && !matchList.length">
			</pt-nothing>
		</block>
		<view class="user-match-add" @click="addMatch">+添加方案</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				page: 0,
				noMore: false,
				isLoading: false,
				matchList: [],
				tabsIndex: 0
			};
		},
		onLoad() {
			this.init()
			this.addFoot('我的-我的方案')
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.init()
			}
		},
		methods: {
			sortFun(e){
				this.noMore = false
				this.page = 0
				this.tabsIndex = e
				this.matchList = []
				this.init()
			},
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			init(){
				let data = {
					page: this.page,
					user_id: JSON.parse(uni.getStorageSync('userInfo')).user_id,
					match_type: this.tabsIndex==0?2:1
				}
				this.$u.api.matchList(data).then(res => {
					this.show = true
					this.isLoading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.matchList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			del(match_id,index){
				uni.showModal({
					title: '温馨提示',
					content: '删除后不可恢复，是否确认删除此方案？',
					cancelText: '我再想想',
					success: (confirm) => {
						if(confirm.confirm){
							this.$u.api.MatchOut({match_id: match_id,status: 2}).then(res => {
								this.matchList.splice(index,1)
								if(!this.matchList.length){
									this.noMore = true
								}
								uni.showToast({
									icon: 'none',
									title: '删除成功'
								})
							})
						}
					}
				})
			},
			edit(match_id){
				let tieIn = {
					match_id: match_id
				}
				uni.setStorageSync('tieIn',JSON.stringify(tieIn))
				uni.navigateTo({
					animationDuration: 500,
					url: '/tie-in/tie-in'
				})
			},
			goMatchInfo(match_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/tie-in/tie-in-preview?match_id='+match_id
				})
			},
			addMatch(){
				// uni.removeStorageSync('tieIn')
				uni.navigateTo({
					animationDuration: 500,
					url: '/tie-in/tie-in'
				})
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: 'din';
		src: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/recomBrand/DIN-Bold.ttf') format('truetype');
	}
	page{
		background-color: #F7F7F7;
	}
	.user-match{
		padding-bottom: 200rpx;
		.user-match-tabs{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 11;
		}
		.user-match-list{
			padding: 100rpx 0 0;
			.user-match-item{
				padding: 40rpx 30rpx;
				border-bottom: solid 1px #F5F5F5;
				display: flex;
				background-color: #FFF;
				.user-match-item-image{
					width: 350rpx;
					height: 260rpx;
					border-radius: 8rpx;
					overflow: hidden;
					margin-right: 20rpx;
					/deep/ .u-image{
						width: 350rpx;
						height: 260rpx;
					}
				}
				.user-match-item-info{
					flex: 1;
					min-width: 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.user-match-item-name{
						.user-match-item-name-text{
							font-size: 28rpx;
							margin-bottom: 30rpx;
							font-weight: bold;
							color: #141414;
						}
						.user-match-item-price{
							font-family: 'din';
							color: #F59359;
							font-size: 20rpx;
						}
						.user-match-item-like{
							font-size: 28rpx;
							text{
								color: #F59359;
							}
						}
					}
					.user-match-item-action{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 20rpx;
						color: #808080;
						.action-type{
							text{
								display: inline-block;
								height: 48rpx;
								line-height: 48rpx;
								color: #FFF;
								background-color: #141414;
								padding: 0 20rpx;
								font-size: 20rpx;
								border-radius: 4rpx;
								&:first-child{
									margin-right: 10rpx;
								}
								&:last-child{
									background-color: #F59359;
								}
							}
						}
					}
				}
			}
		}
		.user-match-add{
			position: fixed;
			bottom: 60rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 200rpx;
			height: 80rpx;
			background: #141414;
			box-shadow: 0px 3px 18px 0px rgba(40, 34, 31, 0.03);
			border-radius: 4px;
			color: #FFF;
			font-size: 24rpx;
			text-align: center;
			line-height: 80rpx;
			z-index: 10;
		}
	}
</style>
